<script setup name="App" lang="ts">
import { reactive, Ref, ref } from 'vue'

// const money = ref<number>(10)
// const money = ref(10)

// 默认是空数组
// 这样写，后面对 todos.value 赋值会报错
// const todos = ref([])
// 如果给数组指定了初始值，其实它是具有类型推断的能力的，后面就能正常赋值对应的数据了，但是这样不好，我怎么知道初始写什么合适呢
// const todos = ref([{ id: 1, name: 'xxx', done: false }])
// 泛型参数规定的就是初始值的类型
// const todos = ref<{ id: number; name: string; done: boolean }[]>([])

interface IItem {
  id: number
  name: string
  done: boolean
}
/* type IItem = {
  id: number
  name: string
  done: boolean
} */
const todos = ref<IItem[]>([])
// 给 ref 定义类型的第二种方式
// const todos: Ref<IItem[]> = ref([])

setTimeout(() => {
  todos.value = [
    { id: 1, name: '吃饭', done: false },
    { id: 2, name: '睡觉', done: true },
  ]
}, 1000)

// 第一种定义 reactive 类型的方式
/* const o: {
  name: string
  age: number
} = reactive({
  name: 'ifer',
  age: 18,
}) */

const o = reactive<{
  name: string
  age: number
}>({
  name: 'ifer',
  age: 18,
})
</script>
<template>
  <div>
    <ul>
      <li v-for="item in todos" :key="item.id">{{ item.name }}</li>
    </ul>
    <p>name: {{ o.name }}</p>
    <p>age: {{ o.age }}</p>
  </div>
</template>
